<!--Api列表-->
<template>
  <div class="all bg1" ref="content" @viewappear="viewappear" @viewdisappear="viewdisappear" @rightBtn="addApi">

    <!--列表-->
    <list class="list" ref="mlist">

      <cell v-for="(item, index) in apis" v-bind:key="index">

        <div class="cell bg2" @click="apiClick(item)">

          <!--按钮-->
          <div class="but">
            <VRefresh class="but-size" :spinKey="'API'+index" :rotate="rotates[item.apiId]" :isMin="turn" @click="refreshClick(item)"></VRefresh>
            <div class="but-size"  @click="showFuncClick(item, $event)">
              <LImage class="ima-func" :src="Config.img('v2_gengduox.png')"></LImage>
            </div>
          </div>

          <!--信息-->
          <div class="infor">
            <LImage class="img-logo bg3" :src="Config.img('v2_'+item.exchangeName.toLowerCase()+'.png')"></LImage>
            <div class="all">
              <div class="row acenter">
                <text class="font32 text2">{{item.apiName}}</text>
                <text class="font20 text3" v-if="item.remarks">{{' (' + item.remarks + ')'}}</text>
                <div class="trust" v-if="item.isFundApi">
                  <text class="font20 main-t1">{{T('托管中')}}</text>
                </div>
              </div>
              
              <div class="row">
                <div class="row acenter" @click="timeClick">
                  <LImage class="explain-image" :src="Config.img('v2_wenhao.png')"></LImage>
                  <text :class="['font22', getExpire(item) ? 'text2' : 'warning-t1']">{{T('API有效期') + '：' + getExpireTime(item)}}</text>
                </div>
              </div>
            </div>
          </div>
          
          <!--资产-->
          <div class="line line1"></div>
          <div>
            <div class="row acenter">
              <text class="font24 text3">{{T('总资产折合') + '(BTC)'}}</text>
              <div class="all"></div>
              <text class="font24 text3">{{T('昨日策略收益') + '(' + Config.priceUnit + ')'}}</text>
            </div>

            <div class="height10"></div>
            <div class="row acenter">
              <text class="font32 text2">{{item.totalBtc}}</text>
              <text class="font26 text3">{{' ≈' + item.totalMoney + Config.priceUnit}}</text>
              <div class="all"></div>
              <text class="font32 text2">{{item.yesterdayEarning}}</text>
            </div>
          </div>
        </div>
      </cell>
    </list>

    <!--弹出菜单-->
    <div class="func" v-if="showFunc" @click="(showFunc = false)">

      <div class="func-frame" ref="func" :style="{'top':menuTop}">
        <LImage class="func-jiao" v-if="menuFace" :src="Config.img('function-sanjiao.png')"></LImage>
        <div class="func-content bg4">
          <text class="font28 text2 func-text"  v-for="(item, index) in funcs" v-bind:key="index" @click="funcClick(item)">{{T(item)}}</text>
        </div>
        <LImage class="func-jiao" v-if="!menuFace" :src="Config.img('function-sanjiaox.png')"></LImage>
      </div>
    </div>
  </div>
</template>

<style src="@/_css/style.css" ></style>
<style scoped>
.list {
  flex: 1;
  margin-top: 15px;
}
.cell {
  border-radius: 24px;
  
  padding: 40px;

  margin-left: 20px;
  margin-right: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
}

/*按钮*/
.but {
  position: absolute;
  flex-direction: row;
  top: 28;
  right: 40;
}
.but-size{
  justify-content: center;
  align-items: center;
  width: 62px;
  height: 62px;
}
.ima-func {
  width: 26px;
  height: 26px;
}

/*信息*/
.infor{
  flex-direction: row;
  align-items: center;
  width: 500px;
}
.img-logo {
  width: 68px;
  height: 68px;
  border-radius: 18px;

  margin-right: 18px;
}
.explain-image {
  width: 24px;
  height: 24px;
  margin-right: 12px;
}
.trust {
  justify-content: center;
  align-items: center;
  height: 32px;
  background: rgba(22, 119, 254, 0.12);
  border-radius: 6px;
  padding-left: 20px;
  padding-right: 20px;
}

/*资产*/
.assets{
  padding-left: 40px;
  padding-right: 40px;
}
.line{
  width: 610px;
  height: 1px;
  margin-top: 40px;
  margin-bottom: 40px;
}

/*功能弹窗*/
.func{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.func-frame {
  position: absolute;
  right: 22;
}
.func-jiao {
  position: absolute;
  width: 28px;
  height: 20px;
  right: 50px;
}
.func-content {
  border-radius: 16px;
  
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;

  margin-top: 20px;
}
.func-text {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>

<script>

//组件
import VRefresh from '@/home/view/VRefresh.vue'

//功能
import jnavigator from "@/_js/navigator";
import jhttps from "@/_js/https";
import jconfig from "@/_js/config";
import jmath from "@/_js/math";
import jmodal from "@/_js/modal";
import japi from "@/_js/api";

const weexFunction = weex.requireModule("WeexFunction");
const globalEvent = weex.requireModule('globalEvent');
const dom = weex.requireModule("dom");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T("API资产"));
weexFunction.setRightBtn(T("添加API"));

export default {
  
  components: {
    VRefresh,
  },

  data() {
    return {
      T:T,
      Config:jconfig,

      menuTop: 0, //功能菜单上距离
      menuFace: true, //功能菜单方向：true 向上  false向下
      showFunc:false, //true 显示功能菜单
      funcs:['修改备注', '删除API', '授权续期', '资产划转'], //功能菜单

      api:undefined, //选中API
      apis:[], //API数组
      rotates:{}, //刷新纪录。
    };
  },

  created() {

    jconfig.init(()=>{
      this.initData();
    }, [jconfig.OPT_CURRENT_BZ]);

    //Api更新通知
    globalEvent.addEventListener("apiUp",(e)=>{
      this.initData();
    });
  },

  methods: {

    initData() {
      japi.getApis('all', 'all', null, (apis)=>{

        for (let index = 0; index < apis.length; index++) {

          var api = apis[index];

          //总资产折合-BTC
          api.totalBtc = jmath.gfCoin(api.totalBtc, 'BTC', true);
          
          //总资产折合-钱
          api.totalCny = jmath.gfMoney(api.totalCny, true);
          api.totalUsd = jmath.gfMoney(api.totalUsd, true);
          api.totalMoney = jconfig.priceUnit == 'CNY' ? api.totalCny : api.totalUsd;
          
          //昨日策略收益-
          var yesterdayEarning = jconfig.priceUnit == 'CNY' ? api.yesterdayEarningCny : api.yesterdayEarningUsd; 
          yesterdayEarning = jmath.gfMoney(yesterdayEarning, true);
          yesterdayEarning = jmath.addJia(yesterdayEarning);
          api.yesterdayEarning = yesterdayEarning;
        }
        this.apis = apis;
      });
    },

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      weexFunction.logPageView('API资产', true);
    },

    //完全隐藏
    viewdisappear() {
      weexFunction.logPageView('API资产', false);
    },

    /********************************** HTTP*/
    //删除API
    httpDeleteApi() {
      
      jmodal.showLoad();
      var param = {'apiId':this.api.apiId};
      jhttps.postX("assetsV2/deleteApi", param,true,(data) => {
          if (data.status == 200) {
            japi.deleteApi(this.api.apiId, ()=>{
              jmodal.hideLoad();
              jmodal.toast(T('删除成功'));
              this.apis.$remove(this.api);
              if(this.apis.length == 0) {
                jnavigator.back();
              }
            });
          } else {
            jmodal.hideLoad();
            jmodal.toast(data.msg);
          }
        }
      );
    },

    /********************************** 获取数据*/
    //获取有效期
    getExpireTime(item){
      
      if (Number(item.expireTime) <= 0) {
        return T('已过期');
      } else if (item.isExpire) {
        return T('同步失败');
      } else if (Number(item.expireTime) > 90) {
        return T('长期有效');
      } else {
        return item.expireTime + T('天');
      }
    },

    //获取是否过期
    getExpire(item) {
      if (Number(item.expireTime) <= 0) {
        return false;
      } else if (item.isExpire) {
        return false;
      } else if (Number(item.expireTime) > 90) {
        return true;
      } else {
        return true;
      }
    },
    
    /********************************** 点击触发*/
    //添加API
    addApi() {
      var nav = {'navColor':'#0c0c0c'};
      jnavigator.open('', 'home/ApiAdd', undefined, nav);
    },

    //Api点击
    apiClick(api){
      var param = {'apiId':api.apiId};
      var nav = {'navColor':'#151a2a'};


      if (api.exchangeName.toLowerCase() == 'uniswap') {
        var param = {'apiId':api.apiId};
        jnavigator.open('', 'home/ApiAccountBk', param);
        return;
      } else if (api.exchangeName.toLowerCase() == 'okexv5') {
        jnavigator.open('', 'home/ApiAccountV5', param, nav);
      } else {
        jnavigator.open('', 'home/ApiAccount', param, nav);
      }
    },

    //有效期提示
    timeClick() {
      jmodal.alert(T('API过期策略将停止执行，有效期请在您的交易所账户API管理界面查询。'),()=>{});
    },

    //同步指定API
    refreshClick(api) {

      var apiId = api.apiId;
      this.rotates[apiId] = true;
      this.$forceUpdate();
      
      japi.synchroApi(api.apiId, ()=>{
        this.rotates[apiId] = false;
        this.$forceUpdate();
      }, ()=>{
        this.rotates[apiId] = false;
        this.$forceUpdate();
      });
    },
    
    //功能显示
    showFuncClick(api, event){
      
      dom.getComponentRect(this.$refs.content, (contentFrame)=>{
        var contentHeight = contentFrame.size.height;
        var funcsHeight = 80 * this.funcs.length + 29;
        var y = event.position.y - 80 + funcsHeight;
        if (y > contentHeight) {
          this.menuFace = false;
          this.menuTop = event.position.y - funcsHeight - 140 + "px";
        } else {
          this.menuFace = true;
          this.menuTop = event.position.y - 70 + "px";
        }
        this.api = api;
        this.showFunc = true;
      });
    },

    //功能操作
    funcClick(item) {
      this.showFunc = false;
      
      if (item == '修改备注') {
        this.remarksClick();
      } else if (item == '删除API') {
        this.deletesClick();
      } else if (item == '授权续期') {

        var param = {'api':this.api}
        var nav = {'navColor':'#0c0c0c'};
        jnavigator.open('', 'home/ApiUp', param, nav);
      } else if (item == '资产划转') {

        var param = {'apiId':this.api.apiId};
        var nav = {'navColor':'#0c0c0c'};
        if (this.api.exchangeName.toLowerCase() == 'okexv5') {
          jnavigator.open('', 'home/ApiTransferV5', param, nav);
        } else {
          jnavigator.open('', 'home/ApiTransfer', param, nav);
        }
      }
    },

    //修改备注
    remarksClick(){

      var parm = {'title':T("备注"),
                   'placeholder':T("请输入1-6位备注"), 
                   'value':this.api.remarks,
                   'max':6};
      jmodal.prompt(parm, (value)=>{

        jmodal.showLoad();
        japi.remarks(this.api.apiId, value, ()=>{
          this.api.remarks = value;
          jmodal.hideLoad();
          jmodal.toast(T('修改成功'));
        });
      });
    },

    //删除API
    deletesClick(){

      var parm = {'title':T("删除API"),
                  'message':T("确认要删除 &{1} API吗？").replace("&{1}", this.api.apiName)};
      jmodal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpDeleteApi();
        }
      });
    },
  },
};

</script>
